<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input
        type="text"
        placeholder="搜索"
        class="search-input"
        v-model="searchQuery"
        @confirm="onSearch"
      />
    </view>

    <!-- 店铺列表 -->
    <view class="shop-list">
		<!-- 单个店铺显示 -->
      <view class="shop-item" v-for="(shop, index) in shops" :key="index" @tap="toWashDetail">
		  <!-- 显示距离使用父相子绝 -->
		  <view class="absolute-child">{{shop.foot}}m</view>
        <!-- 店铺图片 -->
        <image class="shop-image" :src="shop.image" mode="aspectFill" />
        <!-- 店铺信息 -->
        <view class="shop-info">
          <text class="shop-name">{{ shop.name }}</text>
          <view class="rating">
            <text>评分：</text>
            <text class="rating-score">{{ shop.rating }}</text>
          </view>
          <view class="sales">
            <text>销量：</text>
            <text class="sales-num">{{ shop.sales }}</text>
          </view>
          <view class="business-hours">
            <text>营业时间：</text>
            <text>{{ shop.businessHours }}</text>
          </view>
          <view class="address">
            <text>{{ shop.address }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const shops = ref([
  {
	id:1,
    name: '小王汽车美容店',
    rating: '3分',
    sales: '322',
    businessHours: '周一至周五 09:00-22:00',
    address: '山阳区人民中路32号',
    image: '/static/car-wash.jpg', // 替换为你的图片路径
	foot:12,
  },
  {
	  id:2,
    name: '小王汽车美容店',
    rating: '3分',
    sales: '322',
    businessHours: '周一至周五 09:00-22:00',
    address: '山阳区人民中路32号',
    image: '/static/car-wash.jpg',
	foot:12,
  },
  {
	  id:3,
    name: '小王汽车美容店',
    rating: '3分',
    sales: '322',
    businessHours: '周一至周五 09:00-22:00',
    address: '山阳区人民中路32号',
    image: '/static/car-wash.jpg',
	foot:12,
  },
]);

// 搜索框绑定的值
const searchQuery = ref('');

// 搜索功能
const onSearch = () => {
  console.log('搜索内容：', searchQuery.value);
  // 这里可以添加搜索逻辑
};

const toWashDetail = ()=>{
	
	uni.navigateTo({
		url:"/packageIndex/car-wash/car-wash-detail/car-wash-detail?id=1"
	})
}

</script>


<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  
}

/* 搜索框样式 */
.search-bar {
  margin-bottom: 20rpx;
  padding: 10rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-input {
  width: 100%;
  font-size: 32rpx;
  color: #333;
  border: none;
  outline: none;
}

/* 店铺列表样式 */
.shop-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.shop-item {
  display: flex;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  /* 相对定位 */
  position: relative;
    /* width: 100%;
    min-height: 300px;
    border: 2px dashed #666;
    padding: 20px; */
}

/* 绝对定位 */
.absolute-child {
  position: absolute;
  bottom: 190rpx;    /* 贴父容器底部 */
  right: 60rpx;     /* 贴父容器右侧 */
  padding: 10rpx;
  color: #1d6fff;
  border-radius: 4px;
}

/* 店铺图片样式 */
.shop-image {
  width: 200rpx;
  height: 200rpx;
}

/* 店铺信息样式 */
.shop-info {
  flex: 1;
  padding: 20rpx;
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.rating,
.sales,
.business-hours,
.address {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.rating-score {
  color: #ff5722;
  margin-left: 10rpx;
}

.sales-num {
  color: #2196f3;
  margin-left: 10rpx;
}
</style>




